<template>
    <div>
        <el-container>
            <el-header class="inside-header">
                <div>
                    <!-- 面包屑 -->
                    <el-breadcrumb separator=">">
                        <el-breadcrumb-item>数据应用</el-breadcrumb-item>
                        <!--原  <el-breadcrumb-item class="breadcrumbColor">后端执行日志</el-breadcrumb-item>-->
                        <el-breadcrumb-item class="breadcrumbColor">车辆进出台账</el-breadcrumb-item>
                    </el-breadcrumb>
                </div>
            </el-header>
            <el-main>
                <div class="inside-main-box">
                    <el-row class="inside-main">
                        <el-col :span="4" style="margin-left: 20px;">
                            <el-form-item label="出入时间" size="small">
                                <el-date-picker clearable v-model="form.startDateTime" type="date" placeholder="选择时间" style="width: 100%" />
                            </el-form-item>
                        </el-col>
                        <span>-</span>
                        <el-col :span="3">
                            <el-form-item label="" size="small">
                                <el-date-picker clearable v-model="form.endDateTime" type="date" placeholder="选择时间" style="width: 100%" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="4" style="margin-left: 5px;">
                            <el-form-item label="车牌号" size="small">
                                <el-input clearable v-model="form.cl_cph" style="width:200px" maxLength="8" placeholder="请输入" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="4" style="margin-left: 5px;">
                            <el-form-item label="出入类型" size="small">
                                <el-select clearable v-model="form.typeOfAcces" placeholder="请选择">
                                    <el-option label="出厂" value="出厂" />
                                    <el-option label="入厂" value="入厂" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                      <el-col v-if="factoryId == 0" :span="4" style="margin-left: 5px">
                        <el-form-item label="所属工厂" size="small">
                          <el-select v-model="form.factory_id" placeholder="请选择工厂" clearable>
                            <el-option v-for="fa in factory.factorys" :label="fa.factory_name" :key="fa.id" :value="fa.id" />
                          </el-select>
                        </el-form-item>
                      </el-col>
                        <el-col :span="6" style="margin:0  20px 10px ">
                            <el-button size="small" class="sele-but" icon="search" @click="selectQuery">查询</el-button>
                            <el-button size="small" class="empty-but" icon="refresh" @click="onReset">重置</el-button>
                            <el-button size="small" class="empty-but" icon="download" @click="exportExcelData(form)">导出</el-button>
                        </el-col>
                    </el-row>
                </div>
                <!-- 导入弹出框 -->
                <el-dialog style="width: 600px;" v-model="dialogTableVisible" center title="导入文件">
                    <el-upload v-model:file-list="fileList" class="upload-demo" :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove" :limit="3" :on-exceed="handleExceed" drag action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" multiple>
                        <!-- list-type="picture" -->
                        <el-icon class="el-icon--upload">
                            <upload-filled />
                        </el-icon>
                        <div class="el-upload__text">
                            将文件托到此处或<em>点击导入</em>
                            <p>按住Ctrl可同时多选,支持上传rar/zip格式文件,如果没有模板<em>点击下载</em></p>
                        </div>
                        <template #tip>
                            <div class="el-upload__tip">
                            </div>
                        </template>
                </el-upload>
          </el-dialog>
                        <div style="height: 10px; display: flex; align-items: center;background:#f2f4f5;margin:0 -19.5px 0 -20px">
              </div>
  <div style="">
      <el-table :data="tableData" style="width: 100%;" height="460">
        <el-table-column align="center" type="index" label="序号" width="80px" />
        <el-table-column align="center" prop="cl_status" label="状态" show-overflow-tooltip>
          <span>通过</span>
        </el-table-column>
        <el-table-column align="center" prop="factory_id" label="工厂" width="90px" show-overflow-tooltip>
        <template #default="item">
          <span v-if="item.row.factory_id">{{factory.factoryNames[item.row.factory_id]?.factory_name}}</span>
        </template>
        </el-table-column>
        <el-table-column align="center" prop="gateno" label="道闸编号" width="160px" show-overflow-tooltip/>
        <el-table-column align="center" prop="typeOfAcces" label="出入类型" show-overflow-tooltip/>
        <el-table-column align="center" prop="applicationTime" width="160px" label="申请时间" show-overflow-tooltip
                         :formatter="function(row,column){ if(row.applicationTime){ return $moment(row.applicationTime).format('YYYY-MM-DD HH:mm:ss')  }else{  return '' }}"/>
        <el-table-column align="center" prop="cl_cph" label="车牌号"  show-overflow-tooltip/>
        <el-table-column align="center" prop="licensePlateColor" label="车牌颜色"  show-overflow-tooltip/>
        <el-table-column align="center" prop="vehicleEmissions" label="排放阶段"  show-overflow-tooltip/>
        <el-table-column align="center" prop="sj_name" label="司机姓名"  show-overflow-tooltip/>
        <el-table-column align="center" prop="sj_phone" label="司机电话"  show-overflow-tooltip/>
        <el-table-column align="center" prop="registernDate"  label="注册时间" width="160px" show-overflow-tooltip
                         :formatter="function(row,column){ if(row.registernDate){ return $moment(row.registernDate).format('YYYY-MM-DD')  }else{  return '' }}" />
        <el-table-column align="center" prop="cl_sbm" label="车辆识别代码(VIN)"  show-overflow-tooltip/>
        <el-table-column align="center" prop="cl_fdjhm" label="发动机号"  show-overflow-tooltip/>
        <el-table-column align="center" prop="accessTime"  label="出入时间" width="160px" show-overflow-tooltip
        :formatter="function(row,column){ if(row.accessTime){ return $moment(row.accessTime).format('YYYY-MM-DD HH:mm:ss')  }else{  return '' }}" />
        <el-table-column align="center" prop="beizhu" label="备注"  show-overflow-tooltip>
          <span>车辆已登记</span>
        </el-table-column>
       <!--<el-table-column align="center" prop="implementationinstructions" label="执行说明" width="200px" show-overflow-tooltip/>
        <el-table-column align="center" prop="videoAddress" label="视频地址" width="200px" show-overflow-tooltip/>-->
        <el-table-column align="center" prop="viewphotos" label="查看照片"  show-overflow-tooltip>
         <template #default="scope">
           <el-button  v-if="scope.row.viewphotos==null" type="primary" size="small" link >未上传</el-button>
            <el-button v-else type="primary" size="small"  link @click="takePhotoslist(scope.row)">查看照片</el-button>
         </template>
        </el-table-column>
        <el-table-column align="center" prop="information" label="禁行信息"  show-overflow-tooltip/>
    </el-table>
    <el-pagination style="margin-right:40px; display: flex; justify-content: flex-end" v-model:current-page="queryInfo.pagenum" v-model:page-size="queryInfo.pagesize"
                   size="small" layout="prev, pager, next, jumper,total"
                   :total="queryInfo.total" @size-change="handleSizeChange" @current-change="handleCurrentChange"/>
</div>
</el-main>
          <!--照片弹窗-->
          <!--              :src="require('D:\\kq-environment-protection\\images\\2c256f6e-0e9e-40ec-af7c-53dde87903f2.jpg')"-->
      <el-dialog v-model="takePhotosDia"  center>
        <div  class="photoDiv">
          <img
              class="photoImg"
              :src="Image.viewphotos"
              alt=""
          /></div>
      </el-dialog>
</el-container>
</div>
</template>

<script setup lang="ts">
    import {  onMounted,reactive,ref    } from 'vue'
    import {   Plus, UploadFilled    } from "@element-plus/icons-vue";
    import {  selectQueryExect ,selectVehicleFilingDetailed, } from "@/api/mobilePollution"
    import { recordedListOutS } from "@/api/leadingOut"
    // 路由
    import { useRouter  } from 'vue-router'
    // 文件导入
    import { ElMessage, ElMessageBox } from 'element-plus'
    import * as XLSX from 'xlsx'
    import moment from "moment";
    import { v3ImgPreviewFn } from "v3-img-preview";
    import {getFactoryInfo} from "../../../api/factory";
    let factoryId = localStorage.getItem('factoryId')
    let table = reactive({
        rows: [],
        total: 0
    });
    let dialogTableVisible = false;
    onMounted(() => {
      selectQuery()
      getFactorys()
        // getTbaleData(null);
    });
    // const getTbaleData = (namel) => {
    //     getUsers({
    //             displayName: name,
    //             pageNo: 1,
    //             pageSize: 10,
    //         })
    //         .then((res) => {
    //             // table.rows = res.data.records;
    //             // table.total = res.data.total
    //         });
    // };
    //根据条件查询接口
    const selectQuery = () => {
      if(form.startDateTime){
        form.startDateTime = moment(form.startDateTime).format('YYYY-MM-DD')
      }
      if(form.endDateTime){
        form.endDateTime = moment(form.endDateTime).format('YYYY-MM-DD')
      }
      form.pageSize = queryInfo.pagesize
      form.pageNum = queryInfo.pagenum
      selectVehicleFilingDetailed(form).then((res)=>{
        tableData.value = res.data.list
        queryInfo.total=res.data.total;
      })

    }
    //查询全部
    // const select = () => {
      // selectQueryExect({pageNum:queryInfo.pagenum,pageSize:queryInfo.pagesize}).then((res)=>{
      //   tableData.value = res.data.list
      //   queryInfo.total=res.data.total;
      // })
    // }
    //重置
    const onReset = () => {
      form.startDateTime =""
      form.endDateTime =""
      form.cl_cph = ""
      form.typeOfAcces = ""
      form.factory_id=""
      queryInfo.pagenum =1
      queryInfo.pagesize = 10
      selectQuery()
    }
    //分页
    const queryInfo = reactive({
      pagenum:1,
      pagesize:10,
      total:0
    })
    const handleSizeChange = (val) => {
      queryInfo.pagesize = val
      selectQuery()
    }
    //点击第几页
    const handleCurrentChange = (val) => {
      queryInfo.pagenum = val
      selectQuery()
    }
    //随车清单显示图片
    const Image = reactive({
      takePhotos:"",
      viewphotos:""
    })
    const takePhotosDia = ref(false);
    const takePhotoslist = (row) => {
      // takePhotosDia.value = true;
      Image.viewphotos = ''+row.viewphotos;
      v3ImgPreviewFn(Image.viewphotos)
    };

    const router = useRouter()

    const form = reactive({
      // startDateTime: "",
      // endDateTime: "",
      // cl_cph: "",
      // typeOfAcces: "",
      //   access: "",
    });
    // 表格假数据
    const tableData = ref([]);
    let factory=reactive({factorys:[],factoryNames:{}});
    const getFactorys = ()=>{
      getFactoryInfo({pageSize:1000}).then(res=>{
        let factorys = [];
        res.data?.list.forEach(e=>{
          factorys.push(e);
          factory.factoryNames[e.id]=e;
        })
        factory.factorys = factorys;
      })
    }
    //导出英文（数据库字段）
    // const exportExcel = ()=>{
    //   const data = XLSX.utils.json_to_sheet(tableData.value)//此处tableData.value为表格的数据
    //   const wb = XLSX.utils.book_new()
    //   XLSX.utils.book_append_sheet(wb,data,'test-data')//test-data为自定义的sheet表名
    //   XLSX.writeFile(wb,'后端执行日志.xlsx')//test.xlsx为自定义的文件名
    // }
    //导出工序(中文)
    const out = ref()
    const exportExcelData = (form) => {
      ElMessageBox.confirm("确定要导出吗?").then(()=> {
        recordedListOutS(form).then((res) => {
          if (res.data.length == 0) {
            ElMessage.error("未查询到数据")
          } else {

            out.value = res.data
            exportExcel()
          }
        })
      })
    }

    const exportExcel = () => {

        let exportData = []
        //导出数据结构构造\

        out.value.forEach(item => {
          if(item.applicationTime){
            item.applicationTime= moment(item.applicationTime).format('YYYY-MM-DD hh:mm:ss')
          }else{
            item.applicationTime= ""
          }
          item.factory_id = factory.factoryNames[item.factory_id]?.factory_name
          exportData.push({
            cl_status:'通过',
            factory_id:item.factory_id? item.factory_id:'',
            gateno: item.gateno ? item.gateno : '',
            typeOfAcces: item.typeOfAcces? item.typeOfAcces : '',
            applicationTime: item.applicationTime ? item.applicationTime : '',
            cl_cph: item.cl_cph ? item.cl_cph : '',
            licensePlateColor: item.licensePlateColor ? item.licensePlateColor : '',
            vehicleEmissions: item.vehicleEmissions ? item.vehicleEmissions :'',
            sj_name: item.sj_name ? item.sj_name : '',
            sj_phone: item.sj_phone ? item.sj_phone : '',
            accessTime: item.accessTime ? item.accessTime : '',
            registernDate:item.registernDate ? item.registernDate :'',
            cl_sbm: item.cl_sbm ? item.cl_sbm :'',
            cl_fdjhm:item.cl_fdjhm ? item.cl_fdjhm :'',
            beizhu:'车辆已登记',
            information:item.information ?item.information:'',
          })
        })
        //导出表头设计
        let head = {
          cl_status:'状态',
          factory_id:'工厂',
          gateno: '道闸编号',
          typeOfAcces: '出入类型',
          applicationTime:'申请时间',
          cl_cph: '车牌号',
          licensePlateColor: '车牌颜色',
          vehicleEmissions:'排放阶段',
          sj_name:'司机姓名',
          sj_phone:'司机电话',
          accessTime: '出入时间',
          registernDate:'注册时间',
          cl_sbm:'车辆识别代码(VIN)',
          cl_fdjhm:'发动机号',
          beizhu:'备注',
          information:'禁行信息',
        }
        //表头数据切换
        const list = exportData.map(item => {
          const obj = {}
          for (const k in item) {
            if (head[k]) {
              obj[head[k]] = item[k]
            }
          }
          return obj
        })
        // 创建工作表
        const data = XLSX.utils.json_to_sheet(list)
        // 创建工作簿
        const wb = XLSX.utils.book_new()
        // 将工作表放入工作簿中
        XLSX.utils.book_append_sheet(wb, data, 'data')
        // 生成文件并下载
        XLSX.writeFile(wb, '车辆进出台账.xlsx')
    }
</script>
<style scoped>
    /* 面包屑字体颜色更改 */

    .breadcrumbColor>>>.el-breadcrumb__inner {
        color: #000;
    }
    /* 内部header */

    .inside-header {
        height: 20px;
        display: flex;
        justify-content: left;
        align-items: flex-start;
        background:#f2f4f5
    }
    /* 空心按钮样式 */

    .empty-but {
        border: 1px solid #3780b9;
        color: #3780b9;
    }
    /* 实心按钮背景样式 */

    .sele-but {
        background: #3780b9;
        border: 0px;
        border-radius: 2px;
        color: white;
    }

    .add-but {
        background: #dde5fe;
        color: #3780b9;
    }
    /*照片弹窗及图片样式*/
    .photoImg{
      width:100%
      /*vertical-align: middle;width:500px;height:400px;margin:auto*/
    }
    .photoDiv{
      width:100%;display:flex
    }
    /* 分页 */

    .demo-pagination-block {
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }
</style>
